<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    Redux 除了和 React 一起用外，还支持其它界面库。redux不仅仅只能在react里面使用，redux是一个数据集中化管理的方案，可以在任何js环境下使用。我们先在web普通开发的情况下了解一下redux的相关的
    api.然后在 react里面集成 redux。

</p>
<p>
    > cnpm install redux
</p>
</body>
<script src="./js/redux.js"></script>
<script type="text/javascript">
    /*当我们在浏览器环境下引入 redux 工具库后，会在window全局引入一个 Redux 全局对象*/

    /*
    * Redux的使用要遵循如下几步
    *
    * 1. 先使用 createStore 创建仓库
    * 2. 该函数接受一个管理员函数作为参数，该管理员函数可以帮我们去修改仓库的数据
    * 一般取名为 reducer函数。
    * reducer 函数可以接受两个参数
    * 参数1：使我们的仓库数据 state
    * 参数2：是一个描述对象，通过描述对象(action)，可以进行仓库数据的操作
    *   描述对象的必备属性 type: 用于描述此次对仓库的修改行为
    *   可以属性，payload 用于传递修改的参数数据信息
    * */
    var initState = {
        count: 1,
    }
    /*
    * reducer 该函数在 createStore 的时候会执行一次，进行数据的初始化
    * */
    var reducer = function (state = initState, action) {

        console.log('reducer action', action);
        // 后期我们在页面上事件派发 dispatch后，然后通过传递的 action 对象进行最新的state返回
        switch (action.type) {
            case 'add':
                /*reducer 每次返回的都是最新的一个仓库数据 + 10*/
                return {count: state.count + action.payload.number}
            case 'sub':
                /*reducer 每次返回的都是最新的一个仓库数据 - 5*/
                return {count: state.count - action.payload.number}
            default:
                return state;
        }

    }

    /**

     // 该方法用于返回最新的仓库数据
     getState: ƒ getState()

     // 用于做仓库数据操作的api 派发任务
     dispatch: ƒ dispatch(action)

     // 订阅仓库的数据，当视图订阅仓库数据后，一旦数据变化，视图可以立马更新使用的（发布者订阅设计模式）
     subscribe: ƒ subscribe(listener)

     * @type {Store}
     */
    var store = Redux.createStore(reducer);

    console.log(store);
    console.log('获取仓库最新的数据', store.getState());
    store.dispatch({type: 'add', payload: {number: 10}});
    console.log('dispatch add后，获取仓库最新的数据', store.getState());
    store.dispatch({type: 'sub', payload: {number: 5}});
    console.log('dispatch sub后，获取仓库最新的数据', store.getState());


</script>
</html>
